<script setup lang="ts">
defineOptions({
  name: "FULLSCREEN_ELECTRICTITY_OPERATION_OVERVIEW"
});
import { ref, onMounted, onUnmounted, computed, reactive, toRefs } from "vue";
import fullScreen from "@/assets/svg/common/fullScreen.svg?component";
import modelBox from "@/views/common/components/modelBox/index.vue";
import safeDays from "./components/safeDays.vue";
import { useFullscreen, useTransition, TransitionPresets } from "@vueuse/core";
import { getSafeDays, updateSafeDays } from "@/api/modules/operation";
import chartsParent from "./components/chartsParent.vue";
import safetyHazardTasks from "@/assets/svg/common/safetyHazardTasks.svg?component";
import callInWorkOrder from "@/assets/svg/common/callInWorkOrder.svg?component";
import pmTasks from "@/assets/svg/common/pmTasks.svg?component";
import inspectionTasks from "@/assets/svg/common/inspectionTasks.svg?component";
import maintenanceTasks from "@/assets/svg/common/maintenanceTasks.svg?component";
import { deviceStat, handoverTask } from "@/api/waterKanban";
import upwCarousel from "./components/upwCarousel.vue";
import wwtCarousel from "./components/wwtCarousel.vue";
import chartsAlarm from "./components/chartsAlarm.vue";
import chartUPWLSRWWT from "./components/chartUPWLSRWWT.vue";
import chartUPWLSRWWT2 from "./components/chartUPWLSRWWT2.vue";
import chartUPWLSRWWT3 from "./components/chartUPWLSRWWT3.vue";
import chartsRecovery from "./components/chartsRecovery.vue";
import chartsUpwChemistry from "./components/chartsUpwChemistry.vue";
import chartsWwtChemistry from "./components/chartsWwtChemistry.vue";
import chartswwt from "./components/chartswwt.vue";
import { getHandoverRecord } from "@/api/modules/operation";
import { dashboardtodoList } from "@/api/waterKanban";
import topBoard from "@/views/common/topBoard/index.vue";
import dayjs from "dayjs";
const { isFullscreen, toggle } = useFullscreen();
const clock = ref<string>("");
const isShowSafeDays = ref<boolean>(false);
const isShowdom = ref<boolean>(true);
const operationDays = ref<number>(0);
const clickTimer = ref<any>(null);
const clickTimer2 = ref<any>(null);
const operationDaysVal = useTransition(operationDays, {
  duration: 1000,
  transition: TransitionPresets.easeInOutExpo
});
const topBoardRef = ref<InstanceType<typeof topBoard> | null>(null);
const todoListData = ref({});
onMounted(async () => {
  await init();
  deviceStat({
    classCode: "WATER"
  }).then((response: any) => {
    totalDay.value = response;
  });
  // handoverTask({ classCode: "WATER" }).then((response: any) => {
  //   console.log(response);
  //   tableData.value = response.details;
  // });
  dashboardtodoList().then((response: any) => {
    console.log(response);
    tableData.value = response.detail;
    todoListData.value = response;
  });
});
const toFullScreen = () => {
  toggle();
};
const state = reactive({
  totalDay: {
    alarmStat: { total: 0, done: 0, undone: 0 },
    callInWorkOrder: { total: 0, done: 0, undone: 0 },
    deviceStatusStat: { normal: 0, warn: 0, standby: 0, fault: 0 },
    inspectionTasks: { total: 0, done: 0, undone: 0 },
    maintenanceTasks: { total: 0, done: 0, undone: 0 },
    pmTasks: { total: 0, done: 0, undone: 0 },
    safetyHazardTasks: { total: 0, done: 0, undone: 0 },
    totalStat: { total: 0, done: 0 }
  },
  tableData: [],
  autoplay: false
});
const { totalDay, tableData, autoplay } = toRefs(state);
const init = async () => {
  const title = "平台概览（水课运维）";
  document.title = title;
  startClock();
  await getSafeDaysFn();
  setTimeout(() => {
    autoplay.value = true;
  }, 15000);
};
const getSafeDaysFn = async () => {
  const res = await getSafeDays(2);
  if (!res) return;
  const { num } = res;
  operationDays.value = num;
};
const startClock = () => {
  clearClock();
  clickTimer.value = setInterval(async () => {
    clock.value = dayjs().format("YYYY/MM/DD HH:mm:ss");
    const hour = dayjs().get("hour");
    const minute = dayjs().get("minute");
    const second = dayjs().get("second");
    if (hour === 23 && minute === 59 && second === 59) {
      operationDays.value += 1;
      const id = 2;
      const params = { id, num: operationDays.value };
      await updateSafeDays(params);
    }
  }, 1000);

  clickTimer2.value = setInterval(async () => {
    isShowdom.value = !isShowdom.value;
    topBoardRef.value.initAll();
  }, 60000);
};
const clearClock = () => {
  clearInterval(clickTimer.value);
  clearInterval(clickTimer2.value);
};
</script>

<template>
  <div style="position: relative; width: 100%; height: 100%">
    <px-carousel autoplay :interval="60000" style="height: 100%" indicator-position="outside">
      <px-carousel-item>
        <div class="gas-overview">
          <div class="gas-overview-item one">
            <div class="one-item">{{ clock }}</div>
            <div class="one-item one-middle">水课运维平台概览</div>
            <div class="one-item one-right">
              <div class="one-days" @click="isShowSafeDays = true">安全运行天数：{{ Math.round(operationDaysVal) }}天</div>
            </div>
          </div>
          <div class="gas-overview-item five">
            <topBoard ref="topBoardRef" :class-code="'WATER'" dark />
          </div>

          <div class="gas-overview-item five" style="position: relative">
            <modelBox title="UPW终端指标" dark>
              <upwCarousel :color="'white'" style="width: 100%; height: 100%" :type="'dark'" :autoplay="autoplay" />
            </modelBox>
          </div>

          <div class="gas-overview-item six" style="position: relative">
            <modelBox title="WWT总排指标" dark>
              <wwtCarousel :color="'white'" style="width: 100%; height: 100%" :type="'dark'" :autoplay="autoplay" />
            </modelBox>
          </div>
          <div v-if="!isFullscreen" class="full-screen">
            <fullScreen class="icon" @click="toFullScreen" />
          </div>
          <safeDays v-model="operationDays" v-model:visible="isShowSafeDays" if="isShowSafeDays" />
        </div>
      </px-carousel-item>
      <px-carousel-item>
        <div class="gas-overview">
          <div class="gas-overview-item one">
            <div class="one-item">{{ clock }}</div>
            <div class="one-item one-middle">水课运维平台概览</div>
            <div class="one-item one-right">
              <div class="one-days" @click="isShowSafeDays = true">安全运行天数：{{ Math.round(operationDaysVal) }}天</div>
            </div>
          </div>

          <div class="gas-overview-item five">
            <topBoard ref="topBoardRef" :class-code="'WATER'" dark />
          </div>
          <div class="gas-overview-item waterValue8" style="position: relative">
            <modelBox title="交班待处理事项" dark>
              <p style="position: absolute; top: 23px; left: 220px; z-index: 99">{{ todoListData.date }}{{ todoListData.workShift }}</p>
              <div class="model_chart dark">
                <px-table :data="tableData" :border="false" stripe style="width: 100%; overflow-x: hidden" height="212">
                  <px-table-column show-overflow-tooltip :tooltip-effect="'light'" width="120" prop="name" label="类型" />
                  <px-table-column label="事项">
                    <template #default="scope">
                      <span>{{ scope.row.desc }}</span>
                    </template>
                  </px-table-column>
                  <px-table-column width="150" label="交班人">
                    <template #default="scope">
                      <span>{{ scope.row.operatorName }}</span>
                    </template>
                  </px-table-column>
                </px-table>
              </div>
            </modelBox>
          </div>
          <div class="gas-overview-item waterValue5" style="position: relative">
            <modelBox title="UPW化学品耗量" dark>
              <chartsUpwChemistry style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :type="'dark'" />
            </modelBox>
          </div>

          <div class="gas-overview-item waterValue6" style="position: relative">
            <modelBox title="WWT化学品耗量" dark>
              <chartsWwtChemistry style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :type="'dark'" />
            </modelBox>
          </div>

          <div class="gas-overview-item waterValue1" style="position: relative">
            <modelBox title="水量" dark>
              <chartUPWLSRWWT style="width: 100%; height: 100%; overflow: hidden" :width="'100%'" :height="'100%'" :type="'dark'" />
            </modelBox>
          </div>
          <div class="gas-overview-item waterValue7" style="position: relative">
            <modelBox title="电耗" dark>
              <chartswwt style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :type="'dark'" />
            </modelBox>
          </div>
          <!-- <div class="gas-overview-item waterValue2" style="position: relative">
        <modelBox title="LSR水量消耗指标" dark>
          <chartUPWLSRWWT2 style="width: 100%; height: 100%; overflow: hidden" :width="'100%'" :height="'100%'" :type="'dark'" />
        </modelBox>
      </div>

      <div class="gas-overview-item waterValue3" style="position: relative">
        <modelBox title="WWT水量消耗指标" dark>
          <chartUPWLSRWWT3 style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :type="'dark'" />
        </modelBox>
      </div> -->

          <div class="gas-overview-item waterValue4" style="position: relative">
            <modelBox title="回收率" dark>
              <chartsRecovery style="width: 100%; height: 100%" :width="'100%'" :height="'100%'" :type="'dark'" />
            </modelBox>
          </div>

          <div v-if="!isFullscreen" class="full-screen">
            <fullScreen class="icon" @click="toFullScreen" />
          </div>
          <safeDays v-if="isShowSafeDays" v-model="operationDays" v-model:visible="isShowSafeDays" />
        </div>
      </px-carousel-item>
    </px-carousel>
  </div>
</template>

<style lang="scss" scoped>
.gas-overview {
  position: absolute;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(24, minmax(16px, 1fr));
  grid-auto-rows: 66px 234px minmax(16px, 5fr) minmax(16px, 5fr);
  grid-auto-flow: column dense;
  grid-gap: 16px;
  width: 100%;
  height: 100%;
  padding: 16px;
  overflow: hidden;
  background-color: #001e3bff;

  .full-screen {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background-color: var(--px-color-primary-light-9);
    border-radius: 4px;
    box-shadow: 0 0 4px 0 var(--px-color-primary-light-3);

    .icon {
      width: 70%;
      height: 70%;
      color: #00c2ff;
    }

    &:hover {
      background-color: var(--px-color-primary-light-7);
      box-shadow: none;
    }
  }

  .gas-overview-item {
    display: flex;
    align-items: center;
    justify-content: center;

    .px-button {
      padding-right: 0;
    }
  }

  .one {
    box-sizing: border-box;
    display: flex;
    grid-column: 1 / 25;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: url("@/assets/images/overview_header.png") no-repeat;
    background-position: center center;
    background-size: 100% 100%;

    .one-item {
      flex: 1;
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      letter-spacing: 4px;
      background: linear-gradient(to top, #00c2ffff, #fff);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .one-middle {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
    }

    .one-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .one-days {
        &:hover {
          cursor: pointer;
          background: #fff;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }

  .two {
    grid-column: 1 / 7;
  }

  .three {
    grid-column: 7 / 21;
  }

  .four {
    grid-column: 21 / 25;
  }

  .five {
    grid-column: 1 / 25;
  }

  .six {
    grid-column: 1 / 25;
  }

  .seven {
    grid-column: 1 / 25;
  }

  .eight {
    grid-column: 1/25;
  }

  .waterValue1 {
    grid-column: 1/8;
  }

  .waterValue2 {
    grid-column: 6/12;
  }

  .waterValue3 {
    grid-column: 12/18;
  }

  .waterValue4 {
    grid-column: 16/25;
  }

  .waterValue5 {
    grid-column: 13/19;
  }

  .waterValue6 {
    grid-column: 19/25;
  }

  .waterValue7 {
    grid-column: 8/16;
  }

  .waterValue8 {
    grid-column: 1/13;
  }
}

.heard-progress {
  width: 97%;
  height: 33px;
  margin-top: 10px;
}

.mianlist {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80%;
}

.listitem {
  flex: 1;

  .tasks-item-content {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
  }

  .content-icon {
    height: 46px;
  }

  .color-total {
    color: #00c2ff;
  }

  .content-box {
    display: flex;
    flex-direction: column;
    gap: 12px;

    .content-box-label {
      font-weight: 600;
      line-height: 1;
      color: white;
      white-space: nowrap;
    }

    .content-box-data {
      display: flex;
      align-items: center;

      .data-text {
        font-size: 22px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
      }

      .color-done {
        color: #04ff9d;
      }

      .color-total {
        color: #00c2ff;
      }
    }
  }
}

.tasks-total-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;

  .tasks-total-content-title {
    font-weight: 600;
    line-height: 1;
    color: white;
  }

  .tasks-total-content-data {
    display: flex;
    align-items: center;

    .data-text {
      font-size: 28px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .color-done {
      color: #00b36d;
    }

    .color-total {
      color: #00c2ff;
    }
  }

  .tasks-total-content-progress {
    width: 80%;
  }

  .tasks-total-content-legend {
    display: flex;
    gap: 12px;
    align-items: center;

    .legend-item {
      display: flex;
      gap: 8px;
      align-items: center;

      .legend-text {
        font-size: 12px;
        line-height: 1;
        color: white;
        white-space: nowrap;
      }

      .legend-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      .background-done {
        background: #00b36d;
      }

      .background-total {
        background: #00c2ff;
      }
    }
  }
}

.model_chart {
  width: 100%;
  height: 100%;
}

:deep(.px-table__inner-wrapper) {
  background: #001e3b;
}

:deep(.dark .px-table--striped .px-table__body tr.px-table__row--striped td.px-table__cell) {
  background: rgb(172 227 255 / 10%);
  border: none;
}

:deep(.dark .px-table tr) {
  background: #001e3b;
  border-bottom: 1px solid #001e3b !important;
}

:deep(.dark .px-table tr th) {
  background: #001e3b !important;
  border-bottom: 1px solid #001e3b !important;
}

:deep(.px-table--enable-row-transition .px-table__body td.px-table__cell) {
  border: none !important;
}

:deep(.px-carousel__container) {
  height: 100%;
}
</style>
